<template>
  <div class="article-list">
    <div class="table">
      <el-table
        :data="articleInfo.data"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f8f8f9' }"
      >
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column align="center" label="内容">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="分类" align="center">
          <template slot-scope="scope">
            <el-tag size="medium" type="warning">{{
              scope.row.cateName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签">
          <template slot-scope="scope">
            <el-tag size="medium" type="success">{{
              scope.row.tagName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="toEdit(scope.row.id)"
              > <i class="el-icon-edit"></i> 修改</el-button
            >
            <el-button type="danger" size="small" @click="remove(scope.row.id)"
              > <i class="el-icon-delete"></i> 删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pag">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="articleInfo.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'ArticleList',
  data() {
    return {
      // 表格数据
      tableData: [],
      // 阀门
      flag: true,
      // 当前页
      currentPage4: 1,
      // 一页显示的数据条数
      pageSize: 5
    }
  },
  computed: {
    ...mapState('article', ['articleInfo'])
  },
  methods: {
    ...mapActions('article', ['getArticleList', 'deleteArticle']),
    // 删除文章
    async remove(id) {
      const that = this
      if (this.flag) {
        this.flag = false
        this.$confirm('是否删除文章？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          async callback(actions) {
            console.log(that)
            if (actions !== 'confirm') { return that.$message.warning('已取消删除') }
            try {
              await that.deleteArticle(id)
              that.$message.success('succcess')
              that.getArticleList({
                curpage: that.currentPage4,
                pageSize: that.pageSize
              })
            } catch (err) {
              that.$message.error(err.message)
            }
          }
        })
        setTimeout(() => {
          this.flag = true
        }, 2500)
      }
    },
    // 一页显示的数据量发生变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getArticleList({
        curpage: this.currentPage4,
        pageSize: this.pageSize
      })
    },
    // 当前页发生变化
    handleCurrentChange(currentPage) {
      this.currentPage4 = currentPage
      this.getArticleList({
        curpage: this.currentPage4,
        pageSize: this.pageSize
      })
    },
    // 跳转到修改页面
    toEdit(id) {
      console.log(id)
      this.$router.push({
        path: '/home/edit',
        query: {
          id
        }
      })
    }
  },
  // vue生命周期函数：组件创建完毕但未挂载到浏览器
  created() {
    this.getArticleList({ curpage: this.currentPage4, pageSize: this.pageSize })
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: relative;
  padding: 30px 20px 0;
  .table {
    overflow: hidden;
    position: absolute;
    top: 35px;
    width: 100%;
    padding: 0 20px;
    left: 0;
  }
  .pag {
    margin-top: 30px;
    float: right;
  }
}

/deep/.el-table .cell {
  white-space: nowrap;
}
</style>
